<template>
  <view class="resource-product-box" @tap="handleClick">
    <view class="product-fl">
      <image :src="car.img" mode="aspectFill" />
      <text class="pro-img-top" v-show="isTop"></text>
    </view>
    <view class="product-fr">
      <view style="overflow: hidden;">
        <view class="er-tag" :class="{ newtag: isActive }">{{ carType }}</view>
        <view class="product-title">{{ car.car_series_name }}</view>
      </view>
      <view class="product-deploy">
        {{ car.car_brand_name + car.car_series_name + car.car_model_name }}
      </view>
      <view class="product-color">
        {{ car.emission_name }}｜{{ car.appearance }}｜销{{
          car.sale_area && car.sale_area.length > 0
            ? car.sale_area
                .map(i =>
                  i.city_code ? i.province_name + i.city_name : i.province_name
                )
                .join('、')
            : '全国'
        }}
      </view>
      <view style="overflow: hidden;">
        <view class="product-price">{{ Number(car.price).toFixed(2) }}</view>
        <view class="product-unit">万</view>
        <view class="product-area">
          {{ formatAddress(car.car_address) }}
        </view>
      </view>
      <view class="pro-img" v-show="isDock"></view>
    </view>
  </view>
</template>

<script>
import { formatAddress, navigateTo, toLogin } from '@utils/index'
export default {
  name: 'Item',
  props: {
    car: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    isDock() {
      return this.car.docking_status == 1 ? true : false
    },
    isTop() {
      return this.car.is_top == 1 ? true : false
    },
    carType() {
      return this.car.car_type == 1 ? '新车' : '二手车'
    },
    isActive() {
      return this.car.car_type == 1 ? true : false
    }
  },
  methods: {
    formatAddress: formatAddress,
    handleClick() {
      if (!this.$store.state.user.token) {
        toLogin()
        return
      }
      navigateTo('business/resource/detail', {
        carshop_car_id: this.car.carshop_car_id
      })
    }
  }
}
</script>

<style>
.resource-product-box {
  padding: 24rpx;
  border-bottom: 2rpx solid rgba(238, 238, 238, 0.5);
  overflow: hidden;
}
.resource-product-box .product-fl {
  float: left;
  width: 240rpx;
  height: 180rpx;
  border-radius: 10rpx;
  position: relative;
}
.resource-product-box .product-fl image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.resource-product-box .product-fr {
  margin-left: 260rpx;
  position: relative;
}
.resource-product-box .pro-img {
  display: block;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  top: 0;
  right: 0;
  background: url('./images/success.png') no-repeat center center;
  background-size: cover;
}
.resource-product-box .pro-img-top {
  display: block;
  width: 70rpx;
  height: 70rpx;
  position: absolute;
  top: 0;
  left: 0;
  background: url('./images/top.png') no-repeat center center;
  background-size: cover;
}
.resource-product-box .pro-img image {
  width: 100%;
}
.resource-product-box .product-title {
  float: left;
  width: 70%;
  font-size: 32rpx;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.resource-product-box .product-deploy {
  display: block;
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 6rpx 0;
}
.resource-product-box .product-color {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 14rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.resource-product-box .product-price {
  float: left;
  font-size: 36rpx;
  color: #ff0000;
  font-weight: bold;
  height: 40rpx;
  line-height: 40rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.resource-product-box .product-unit {
  float: left;
  font-size: 28rpx;
  color: #ff0000;
  margin-left: 6rpx;
  line-height: 40rpx;
  margin-top: 3rpx;
}
.resource-product-box .product-area {
  float: right;
  width: 60%;
  font-size: 24rpx;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 40rpx;
  text-align: right;
}
.resource-product-box .er-tag {
  float: left;
  padding: 0 8rpx;
  line-height: 30rpx;
  font-size: 18rpx;
  margin: 0;
  background: linear-gradient(134deg, #9cb8e1 0%, #698bc1 100%);
  border-radius: 6rpx;
  color: #fff;
  margin-right: 8rpx;
  margin-top: 10rpx;
}
.resource-product-box .er-tag.newtag {
  background: linear-gradient(141deg, #2ce4af 0%, #1ec6af 100%);
}
.resource-product-box .clear {
  clear: both;
}
</style>
